<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="这是一个 adminInfo 页面">
<meta name="keywords" content="adminInfo">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<title>用户管理</title>

<!-- CSS -->    
<link rel="stylesheet" type="text/css" href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${basePath}static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" media="screen" href="${basePath}static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" >
<link rel="icon" type="image/png" href="${basePath}static/adminManager/assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="${basePath}static/adminManager/assets/i/app-icon72x72@2x.png">
<link rel="stylesheet" href="${basePath}static/adminManager/assets/css/amazeui.min.css" />
<link rel="stylesheet" href="${basePath}static/adminManager/assets/css/admin.css">
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css" href="${basePath}static/paginationjs-master-2.1.0/dist/pagination.css" />
<!-- bootstrap 模态框 css -->
<link rel="stylesheet" type="text/css" href="${basePath}static/BootstrapEx_pop-up/css/bootstrapEx.css" />

</head>


<body>

    <div class="admin-biaogelist">
    
		<div class="listbiaoti am-cf">
			<ul class="am-icon-flag on">用户管理</ul>
        	<dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">用户管理</a></dl>
        </div>
        
        
<div class="am-g tpl-g" >
	<div class="tpl-login">
		<div class="tpl-login-content">
		
  <form id="form1"  class="form-horizontal "  action="LoginAction" method="post"  onsubmit="return false">
		
		<!-- 搜索框模糊查询 -->		
<div style="position:fixed;top: 26px;left: 160px;">
	<ul class="am-nav am-nav-pills am-topbar-nav admin-header-list">
    			<style type="text/css">
    				.soso { margin-top: -2px !important; margin-left:240px;}
    			</style>
    	<li class="soso">
 				<p  style="height:28px;width:80px;border: 1px solid #E6E6E6;text-align:center;vertical-align:middle;padding-top:3px;">   
					<font style="margin-top:2px;">用户名</font>
				</p>
				<p class="ycfg">
					<input type="text" class="am-form-field am-input-sm" id="phonename" 
						name="phonename" placeholder="请输入搜索内容" />
				</p>
				<p>
					<button type="button" class="am-btn am-btn-xs am-btn-default am-xiao" onclick="doAjaxQuery()">
						<i class="am-icon-search"></i>
					</button>
				</p>
 		</li>
  	</ul>
</div>
		
		<!-- 模糊查询搜索框【按adminname查询】 
		<div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
			<ul>
				<li ><label class="" style="margin-top:2px;">用户名</label></li>
    			<li><input type="text" class="am-form-field am-input-sm am-input-xm"  id="txtUserName" 
					name="adminname"  placeholder="关键词搜索" /></li>
    			<li><button type="button" class="am-btn am-radius am-btn-xs am-btn-success" 
    				style="margin-top:2px;" onclick="doAjaxQuery()">搜索</button>
    			</li>
  			</ul>
		</div>
		-->

		<div class="form-group" >
			<div class="am-form am-g">
				<table class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
					<!-- 表格头部 -->
					<thead>
						<tr class="am-success">
							<th style='vertical-align:middle;text-align:center'>序号</th>
							<th style='vertical-align:middle;'>姓名</th>
							<th style='vertical-align:middle;'>性别</th>
							<th style='vertical-align:middle;'>IDCard</th>
							<th style='vertical-align:middle;'>地址</th>
							<th style='vertical-align:middle;'>收货地址</th>
							<th style='vertical-align:middle;'>手机</th>
							<th style='vertical-align:middle;text-align:center'>头像</th>
							<th style='vertical-align:middle;'>注册时间</th>
							<th style='vertical-align:middle;text-align:center'>修改</th>
							<th style='vertical-align:middle;text-align:center'>删除</th>
						</tr>
					</thead>
					
					<!-- 查询后的结果 -->
					<tbody id="displaytbody">

					</tbody>
					
				</table>
			</div>
			
			<!-- 分页【每10行一页】 -->
			<div class="col-sm-offset-5 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
			
		</div>
		<!-- /example -->
	</form>
            
		</div>
	</div>
 </div>


</div>


<!-- 点击图片放大的遮罩弹层 -->
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:1000;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>


</body>


<!-- JS -->	
<script src="${basePath}static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="static/layui-v2.4.5/layui/layui.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript" src="static/paginationjs-master-2.1.0/dist/pagination.min.js"></script>
<!-- bootstrap 模态框 -->
<script type="text/javascript" src="static/BootstrapEx_pop-up/js/bootstrapEx.js"></script>
<script type="text/javascript">
	// 弹出框、模态框调用 
	function InitModal3(pageUri) {
		// 定义一个模态框对象
		var Modal3;
		$(document.body).append('<div id="modal3"></div>');
		Modal3 = new Modal();
		Modal3.renderto = "#modal3";
		Modal3.InitShow = true;
		Modal3.title = "修改用户信息";
		Modal3.btns = [ 
			/* {
			id : "savebtn",
			text : "保存"
		}, */
		{
			id : "savebtn",
			text : "保存"
		} ]
		tab1 = new Tab();
		Modal3.OnfirstInited = function(thismodal) {
			tab1.tabs = [ {
				id : "tabs1",
				title : "",
				active : true,
				isiframe : true,
				url : pageUri
			}];
			tab1.renderto = thismodal.body;
			tab1.Init();
		}
		
		// 显示模态框
		Modal3.show();
		
		// 给模态框的 确定按钮  绑定一个点击事件
		$("#savebtn").click(function(){
			console.info("你点击了模态框的保存按钮");
			// 获取模态框中的iframe页面中的from表单数据
			console.info($('#tabs1'));
			console.info($('iframe').contents().find("#modifyModelForm1").serialize());
			console.info($('iframe').contents().find("#hiddenclick"));
			
			
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			$('iframe').contents().find("#hiddenclick").click();
			//处理后关闭模态框
	        $('.modal').modal('hide');
	        layer.msg("修改成功");
	        doAjaxQuery();
		});
		
		// Modal关闭完成时的事件处理(只需要定义该函数就会调用)
		modal3_Hideend = function() {
			// 调用修改保存事件
			// 使用选择器找到模态框中jsp页面的from表单对象，并调动其点击事件，进行ajax方法处理
			//$('iframe').contents().find("#hiddenclick").click();
			console.info("modal关闭时执行的方法");
	        // 调用ajax进行数据修改之后的更新
	    }
	}
	</script>
	
	
	<!-- 使用jquery进行ajax处理 -->
	<script type="text/javascript">
	function doAjaxQuery() {
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "AjaxQueryUserAction", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				// 将ajax查询的结果进行分页处理
				doPaging(data, 10);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
</script>

<!-- 分页处理--处理lsit类型的结果集  -->
<script type="text/javascript">
	function doPaging(data, pagesize) {
		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize =10; // 默认页面大小为10条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager').pagination({
							dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
							pageSize : pagesize,// 每页显示的记录条数
							showGoInput : true, // 是否显示goin按钮
							showGoButton : true,
							callback : function(data, pagination) {
								console.info(pagination);
								// 分页处理
								// 解析拼写的html内容
								var strHtml = "";
								$.each(data,function(index, eachVal) {
													strHtml += "<tr>";

													strHtml += "<th scope='row' style='vertical-align:middle;text-align:center'>";
													strHtml += (index + 1);
													strHtml += "</th>";

													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.username;
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.usersex;
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.useridcard;
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.usercity;
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.shoppingaddress;
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.usertel;
													strHtml += "</td>";

													strHtml += "<td style='vertical-align:middle;text-align:center'>";
													strHtml += "<img src='";
													strHtml+=eachVal.userimg;					
													strHtml+="' width='30px' height='30px' class='pimg'/>";
													strHtml += "</td>";
													
													strHtml += "<td style='vertical-align:middle;'>";
													strHtml += eachVal.usertime;
													strHtml += "</td>";
													
													// 添加修改按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td style='vertical-align:middle;text-align:center'><a  href='javascript:InitModal3(\"jump2?pg=userMessage/userModal&uid=";
													strHtml += eachVal.userid;
													strHtml += "\")'>修改</a></td>";
													// 添加删除按钮
													/* onclick='confirm(\"是否删除该记录?\")' */
													strHtml += "<td style='vertical-align:middle;text-align:center'><a  href='javascript:ajax_deletebyId(";
													strHtml += eachVal.userid;
													strHtml += ")'>删除</a></td>";

													strHtml += "</tr>";
												});

								// 把解析的html内容，使用dom操作赋值到表格中
								$("#displaytbody").html(strHtml);
							}
						})
	}
</script>


<!-- 删除的action处理  -->
<script type="text/javascript">
	function ajax_deletebyId(uid) {
		
		var isOK = confirm("是否删除该记录?");
		if (!isOK) {
			return false;
		}
		/*
		var isok=false;
        layer.confirm('是否删除该记录?',{
            bth:['确定','取消']
        },function(){
　　　　isok=true;//拦截不住的layui
             alert("点击了确定");
        },function(){
             alert("点击了取消");
        });
		if (!isok) {
			return false;
		}
		*/
		
		console.info("ajax_deletebyId");
		// 使用jquery进行ajax请求处理
		var delelteUri = "adminInfo/" + uid;
		console.info(delelteUri);
		$.ajax({
			type : "delete", // 请求类型
			url : delelteUri, // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				// 将ajax查询的结果进行分页处理
				doPaging(data, 10);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
			},
			error : function(data) {
				layer.alert("请求失败" + data);
			}
		});
	}
</script>

<!-- 管理密码验证【原生的prompt】 -->
<script type="text/javascript ">
function password() {
	var password1=prompt('请输入用户密码：');
	if(password1==""){
		alert("请输入正确的用户密码！");
		password1=prompt("请重新输入正确的用户密码：");
	}
	if(password1=="chen1869"){
		alert("密码正确！");
	}else{
		alert("密码错误！");
		//history.go(-2);
		 window.location.href="${basePath}jump?pg=welcome"; 
	}
}
</script>

<!-- 管理权限的确认，管理密码正确则打开页面，管理密码错误则阻拦并返回欢迎页【layui的prompt】 -->
<script>
	layui.use(['layer'],function(){
		layer.prompt({
			formType:1,
			title:'请输入管理密码',
			maxlength:140,
			cancel: function() {//右上角关闭按钮绑定的事件
		        alert('cancel');
		        window.location.href="${basePath}jump?pg=welcome"; 
		    },btn2: function() {//取消按钮绑定的事件
		        alert('cancel');
		        window.location.href="${basePath}jump?pg=welcome"; 
		    }
		},function(value,index,elem){
			//alert(value);
			if(value=="chen1869"){
				layer.msg("密码正确!");
				layer.close(index);
			}else{
				layer.msg("密码错误!");
				//history.go(-2);
				window.location.href="${basePath}jump?pg=welcome"; 
			}	
		});
	});
</script>

<!-- 点击图片放大，再次点击恢复 -->
<script type="text/javascript">
$(function(){
	//解决了js解析了之后的html无法加载js的问题：把事件绑定在父元素上
	$("#displaytbody").on("click",".pimg",function(){ 
    //$(".pimg").click(function(){  
        var _this = $(this);//将当前的pimg元素作为_this传入函数  
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
    });  
});  

function imgShow(outerdiv, innerdiv, bigimg, _this){  
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性  
  
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/  
    $("<img/>").attr("src", src).load(function(){  
        var windowW = $(window).width();//获取当前窗口宽度  
        var windowH = $(window).height();//获取当前窗口高度  
        var realWidth = this.width;//获取图片真实宽度  
        var realHeight = this.height;//获取图片真实高度  
        var imgWidth, imgHeight;  
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
          
        if(realHeight>windowH*scale) {//判断图片高度  
            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放  
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                imgWidth = windowW*scale;//再对宽度进行缩放  
            }  
        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
        } else {//如果图片真实高度和宽度都符合要求，高宽不变  
            imgWidth = realWidth;  
            imgHeight = realHeight;  
        }  
                $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放  
          
        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距  
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });  
      
    $(outerdiv).click(function(){//再次点击淡出消失弹出层  
        $(this).fadeOut("fast");  
    });  
}
</script>

</html>